<template>
  <div class="map-container">
    <div class="control-panel">
      <!-- 飞行动画开关 -->
      <div class="control-item">
        <label class="switch">
          <input type="checkbox" v-model="flyToEnabled" />
          <span class="slider"></span>
        </label>
        <span class="label">{{
          flyToEnabled ? "飞行动画已启用" : "飞行动画已禁用"
        }}</span>
      </div>

      <!-- 地图数据选择 -->
      <div class="control-item">
        <select v-model="selectedMap" class="map-select">
          <option v-for="map in availableMaps" :key="map.path" :value="map">
            {{ map.name }}
          </option>
        </select>
        <span class="label">当前地图: {{ selectedMap.name }}</span>
      </div>

      <!-- 颜色方案选择 -->
      <div class="control-item">
        <select v-model="selectedColorScheme" class="map-select">
          <option value="blueRed">蓝红渐变</option>
          <option value="rainbow">彩虹渐变</option>
          <option value="heatmap">热力图渐变</option>
        </select>
        <span class="label"
          >颜色方案: {{ colorSchemeNames[selectedColorScheme] }}</span
        >
      </div>

      <!-- 比例尺类型切换 -->
      <div class="control-item">
        <label class="switch">
          <input type="checkbox" v-model="useLogScale" />
          <span class="slider"></span>
        </label>
        <span class="label">{{
          useLogScale ? "对数比例尺" : "线性比例尺"
        }}</span>
      </div>

      <!-- 高度映射开关 -->
      <div class="control-item">
        <label class="switch">
          <input type="checkbox" v-model="enableHeightMapping" />
          <span class="slider"></span>
        </label>
        <span class="label">{{
          enableHeightMapping ? "高度映射已启用" : "高度映射已禁用"
        }}</span>
      </div>

      <!-- 最大高度调整（仅当高度映射启用时显示） -->
      <div class="control-item" v-if="enableHeightMapping">
        <div class="slider-container">
          <label class="slider-label"
            >最大高度: {{ maxHeight.toFixed(1) }}</label
          >
          <input
            type="range"
            min="0.5"
            max="5"
            step="0.1"
            v-model.number="maxHeight"
            class="height-slider"
          />
        </div>
      </div>

      <!-- 颜色图例 -->
      <div class="control-item">
        <div class="legend">
          <div class="legend-title">数值图例</div>
          <div class="legend-gradient" :class="selectedColorScheme"></div>
          <div class="legend-labels">
            <span>低</span>
            <span>高</span>
          </div>
        </div>
      </div>

      <!-- 选中地区信息（如果有） -->
      <div class="control-item selected-region" v-if="selectedRegion">
        <div class="selected-region-info">
          <div class="region-title">选中地区: {{ selectedRegion.name }}</div>
          <div class="region-value">
            数值: {{ selectedRegion.value?.toFixed(2) || "N/A" }}
          </div>
        </div>
      </div>
    </div>

    <!-- 地图渲染 -->
    <TresCanvas v-bind="state" window-size>
      <TresPerspectiveCamera
        :position="[0, 12, 0]"
        :fov="75"
        :near="0.1"
        :far="1000"
        :up="[0, 0, -1]"
      />
      <OrbitControls v-bind="controlsState" />
      <TresAmbientLight :intensity="8.8" />
      <TresDirectionalLight :position="[0, 10, 5]" :intensity="0.2" />
      <TresDirectionalLight :position="[0, 10, -5]" :intensity="0.2" />
      <TresDirectionalLight :position="[5, 10, 0]" :intensity="0.2" />
      <TresDirectionalLight :position="[-5, 10, 0]" :intensity="0.2" />
      <TresGridHelper :args="[20, 10]" />
      <Suspense>
        <MapMesh
          :enableFlyTo="flyToEnabled"
          :geoJsonPath="selectedMap.path"
          :geoJsonFeature="selectedMap.feature"
          :colorScheme="selectedColorScheme"
          :regionData="simulatedData"
          :useLogScale="useLogScale"
          :enableHeightMapping="enableHeightMapping"
          :maxHeight="maxHeight"
          @region-click="handleRegionClick"
          @region-hover="handleRegionHover"
          @region-leave="handleRegionLeave"
        />
      </Suspense>
    </TresCanvas>
  </div>
</template>

<script setup>
import { TresCanvas } from "@tresjs/core";
import { OrbitControls } from "@tresjs/cientos";
import MapMesh from "@/components/three/mesh/mapMesh.vue";
import { reactive, ref } from "vue";

// 飞行功能开关的状态
const flyToEnabled = ref(false);

// 颜色方案选择
const selectedColorScheme = ref("rainbow");
const colorSchemeNames = {
  blueRed: "蓝红渐变",
  rainbow: "彩虹渐变",
  heatmap: "热力图渐变",
};

// 比例尺类型
const useLogScale = ref(false);

// 高度映射控制
const enableHeightMapping = ref(false); // 默认启用
const maxHeight = ref(0.5); // 默认最大高度

// 生成模拟数据
const simulatedData = reactive({});
const generateSimulatedData = () => {
  // 为不同地区生成随机数值
  // 使用指数分布生成更有差异的数据
  const generateValue = () => Math.pow(Math.random(), 2) * 1000;

  // 江苏省地区名称
  const jiangsuRegions = [
    "南京市",
    "苏州市",
    "无锡市",
    "常州市",
    "南通市",
    "扬州市",
    "镇江市",
    "泰州市",
    "盐城市",
    "淮安市",
    "宿迁市",
    "徐州市",
    "连云港市",
  ];

  // 生成模拟数据
  jiangsuRegions.forEach((region) => {
    simulatedData[region] = generateValue();
  });
};
generateSimulatedData();

// 可用地图数据配置
const availableMaps = [
  {
    name: "江苏省",
    path: "src/components/three/json/32000_full.json",
    feature: "features",
  },
  {
    name: "中国",
    path: "src/components/three/json/china.json",
    feature: "features",
  },
  // 可以添加更多地图数据
];

// 当前选择的地图
const selectedMap = ref(availableMaps[0]);

const state = reactive({
  clearColor: "",
  alpha: false,
  antialias: true,
});

const controlsState = reactive({
  enableDamping: true,
  dampingFactor: 1,
  makeDefault: true,
});

// 选中地区信息
const selectedRegion = ref(null);
// 悬停地区信息
const hoveredRegion = ref(null);

// 处理区域点击事件
const handleRegionClick = (region) => {
  // 设置选中的区域
  selectedRegion.value = region;

  // 使用表格形式打印完整的地区数据信息
  console.table({
    名称: region.name,
    数值: region.value,
    高度: region.depth,
    颜色: `#${region.color.toString(16).padStart(6, "0")}`,
    位置: `(${region.position.x.toFixed(2)}, ${region.position.y.toFixed(
      2
    )}, ${region.position.z.toFixed(2)})`,
  });
};

// 处理地区悬停事件
const handleRegionHover = (region) => {
  // 更新悬停地区信息
  hoveredRegion.value = region;
  // 可选：在控制台打印悬停信息
  // console.log('悬停地区:', region.name);
};

// 处理地区离开事件
const handleRegionLeave = (region) => {
  // 清除悬停地区信息
  if (hoveredRegion.value?.name === region.name) {
    hoveredRegion.value = null;
  }
};
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
}

.control-item {
  display: flex;
  align-items: center;
}

.label {
  color: white;
  margin-left: 10px;
  font-size: 14px;
}

.map-select {
  background-color: #333;
  color: white;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

/* 高度滑块样式 */
.slider-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.slider-label {
  color: white;
  font-size: 14px;
  margin-bottom: 5px;
}

.height-slider {
  width: 100%;
  height: 5px;
  background: #555;
  outline: none;
  border-radius: 3px;
  appearance: none;
}

.height-slider::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  background: #2196f3;
  border-radius: 50%;
  cursor: pointer;
}

.height-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #2196f3;
  border-radius: 50%;
  cursor: pointer;
}

/* 图例样式 */
.legend {
  width: 100%;
  padding: 5px;
  color: white;
}

.legend-title {
  font-size: 14px;
  margin-bottom: 5px;
}

.legend-gradient {
  height: 20px;
  width: 100%;
  border-radius: 2px;
  margin-bottom: 5px;
}

.legend-gradient.blueRed {
  background: linear-gradient(
    to right,
    #2166ac,
    #67a9cf,
    #d1e5f0,
    #f7f7f7,
    #fddbc7,
    #ef8a62,
    #b2182b
  );
}

.legend-gradient.rainbow {
  background: linear-gradient(
    to right,
    #2c7bb6,
    #00a6ca,
    #00ccbc,
    #90eb9d,
    #ffff8c,
    #f9d057,
    #f29e2e,
    #e76818,
    #d7191c
  );
}

.legend-gradient.heatmap {
  background: linear-gradient(
    to right,
    #313695,
    #4575b4,
    #74add1,
    #abd9e9,
    #e0f3f8,
    #ffffbf,
    #fee090,
    #fdae61,
    #f46d43,
    #d73027,
    #a50026
  );
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* 选中地区信息样式 */
.selected-region {
  margin-top: 10px;
  background-color: rgba(33, 150, 243, 0.3);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.selected-region-info {
  color: white;
  width: 100%;
}

.region-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.region-value {
  font-size: 13px;
}
</style>
